import { Grid, SearchBar, SideBar } from 'antd-mobile'
import React, { useEffect, useState, useMemo, useCallback } from 'react'
import style from './index.less'
import { areaList } from '@vant/area-data'
import classnames from 'classnames'
import { tabsType, tabThird, getList } from '@/services/caig'
type Props = {
    showSearch?: boolean
}
interface dataDto {
    id: number;
    menuName: string;
    text: string;
    list: []
}


export default (props: Props) => {
    const { province_list, city_list } = areaList // 省市区
    const { showSearch } = props;
    const [tabs, setTabs] = useState<dataDto[]>([])
    const [tabsThird, setTabsThird] = useState<dataDto[]>([])
    const [tabsThree, setTabsThree] = useState([])
    const [searchActive, setSearchActive] = useState<boolean>(false);
    const [species, setSpecies] = useState<string>()
    const [name, setName] = useState<string | number>()
    const [searchValue, setSearchValue] = useState('');
    const [listData, setListData] = useState([])
    const [listObj, setListObj] = useState({})
    const [selectedValue, setSelectedValue] = useState<string>();
    //获取输入框值,并执行查询
    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(async () => {
            const res = await getList(value)
            setListData(res)
        }, 500)
    }
    //省市列表
    useEffect(() => {
        const proviceIdArr = Object.keys(province_list)
        const cityIdArr = Object.keys(city_list)
        const obj = proviceIdArr.reduce((result, v) => {
            const partten = v.slice(0, 2)
            const cities = cityIdArr.filter(x => x.slice(0, 2) === partten).map(x => city_list[x])
            cities.unshift('全部');
            result[province_list[v]] = cities
            return result
        }, {})
        setListObj(obj)

    }, [])
    const getDate = useMemo(() => {

    }, [])

    //获取一级菜单
    const getDataFirst = async () => {
        const res = await tabsType()
        setTabs(res)
    }
    //获取二级、三级菜单
    const getDataThird = async (name: string) => {
        const res = await tabThird(name)
        setTabsThird(res)
        setTabsThree(res[name].list)
    }

    useEffect(() => {
        getDataFirst()
    }, [name])

    //获取省市，种类选择的值
    const handleChange = (values: string) => {
        setName(values)
        { showSearch ? (getDataThird(values)) : null }
    }

    //点击市存市数据
    const handleCityClick = (value: string) => {
        setSelectedValue(value);
        console.log(value);
    };
    //点击种类存数据
    const handleMenuClick = (value: string) => {
        setSpecies(value);
        console.log(value);
    };

    //输入框点击变换界面样式
    const onSearchFocus = useCallback(() => {
        setSearchActive(true);
    }, []);

    return (
        <div className={style['top-list']}>
            {showSearch ? (
                <SearchBar
                    placeholder='请输入关键字'
                    onChange={handleInputChange}
                    showCancelButton
                    value={searchValue}
                    onCancel={() => setSearchActive(false)}
                    onFocus={onSearchFocus}
                    className={style.search}
                />
            ) : null}
            {searchActive ? (
                <div className={style.select}>
                    {searchValue.length > 0 ? (
                        <div className={style['select-item']}>
                            {listData?.map((item) => (
                                <div key={item.id} >
                                    {item.name}
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div>暂时没有匹配道搜索结果</div>
                    )}
                </div>
            ) : (
                <div className={style.container}>
                    <div className={style.aa}>
                        <SideBar
                            onChange={handleChange}
                            className={classnames(style.side, {
                                [style.width]: true !== showSearch
                            })}
                        >
                            {showSearch ? (tabs.map((item) => (
                                <SideBar.Item key={item.id} title={item.menuName} />
                            )))
                                : (Object.keys(listObj).map(item => (
                                    <SideBar.Item key={item} title={item} />
                                )))}

                        </SideBar>
                    </div>

                    <div className={style.main}>
                        {showSearch ? (tabsThird?.map((menu) => (
                            <div
                                key={menu.id}
                                className={classnames(style.city, { [style.selected]: selectedValue === menu.menuName })}
                                onClick={() => handleMenuClick(menu.menuName)}
                            >
                                <div className={style.menuThird}>{menu?.menuName}</div>
                                <Grid columns={3} gap={8}>
                                    {tabsThree?.map((item) => (
                                        <Grid.Item key={item.id} className={style.grid}>
                                            <div>{item.menuName}</div>
                                        </Grid.Item>
                                    ))}
                                </Grid>
                            </div>
                        )))
                            : (listObj[name]?.map((item) => (
                                <div
                                    key={item}
                                    className={classnames(style.city, { [style.selected]: selectedValue === item })}
                                    onClick={() => handleCityClick(item)}
                                >
                                    {item}
                                </div>
                            )))
                        }
                    </div>
                </div>
            )}


        </div>
    )
}
